<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <style>
      #table01{
         border: 2px solid rgb(255, 0, 55);
         border-collapse: collapse; 

    }
    th,td{
      border: 1px solid blue;
    }
  </style>
  <body>
    <div id="app">
      <div>名称：{{info.name}}</div>
      <div>地址: {{info.url}}</div>
      <div v-for="link in info.links">{{link.name}}------>{{link.url}}</div></div>
    </div>
    <ul>
      <li  v-for="(name,url) in info.links">{{name}} {{link.url}}</li>
    </ul>
    <table id="table01" v-for="link in info.links">
          <caption>网址</caption>
        <tr>
            <th>名称</th>
            <th>地址 </th>
        </tr>
        <tr>
            <td >{{ link.name }}</td>
            <td >{{ link.url }}</td>
        </tr>
    </table>
    <script>
      var app = new Vue({
        el: "#app",
        data() {
          return {
            info: {
              name: "",
              url: "",
              links: [],
            },
          };
        },
        mounted() {
          //请求data.json里面的数据
          axios
            .get("data.json")
            .then((response) => (this.info = response.data))
            .then(console.log(app.info));
        },

        
      });
    
    </script>
  </body>
</html>
